<extend name="public@base5"/>
<block name="head">
    <php>
        if (!function_exists('_get_system_widget')) {
        function _get_system_widget($name){
    </php>
    <switch name="name">
        <case value="CmfHub">
            <div class="card">
                <div class="card-header">
                    <h3 class="panel-title">{:lang('Get help')}</h3>
                </div>
                <div class="card-body home-info">
                    <table>
                        <tr>
                            <td>
                                <b class="title">{:lang('Official website')}</b>
                            </td>
                            <td>
                                <a href="http://www.thinkcmf.com" target="_blank">www.thinkcmf.com</a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b class="title">{:lang('QQ Group')}</b>
                            </td>
                            <td>
                                100828313,316669417
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b class="title">{:lang('Contact email')}</b>
                            </td>
                            <td>
                                catman@thinkcmf.com
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </case>
        <case value="CmfDocuments">
            <div class="card">
                <div class="card-header">
                    <h3 class="panel-title">{:lang('Dev manual')}</h3>
                </div>
                <div class="card-body home-info">
                    <table>
                        <tr>
                            <td>
                                <b class="title">{:lang('ThinkCMF Dev manual')}</b>
                            </td>
                            <td>
                                <a class="badge text-bg-success" href="https://www.thinkcmf.com/docs/cmf8/"
                                   target="_blank">{:lang('Read now')}</a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b class="title">{:lang('FAQ manual')}</b>
                            </td>
                            <td>
                                <a class="badge text-bg-success" href="http://www.thinkcmf.com/faq.html"
                                   target="_blank">{:lang('Read now')}</a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b class="title">{:lang('Theme dev tutorial')}</b>
                            </td>
                            <td>
                                <a class="badge text-bg-success" href="http://www.thinkcmf.com/theme_tutorial.html"
                                   target="_blank">{:lang('Read now')}</a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b class="title">{:lang('API Dev manual')}</b>
                            </td>
                            <td>
                                <a class="badge text-bg-success" href="https://www.thinkcmf.com/docs/cmf8/#/API"
                                   target="_blank">{:lang('Read now')}</a>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </case>
        <case value="MainContributors">
            <div class="card">
                <div class="card-header">
                    <h3 class="panel-title">{:lang('Major contributors')}</h3>
                </div>
                <div class="card-body home-info main_contributors">
                    <ul class="list-inline">
                        <li>{:lang('Loading...')}</li>
                    </ul>
                </div>
            </div>
        </case>
        <case value="Contributors">
            <div class="card">
                <div class="card-header">
                    <h3 class="panel-title">{:lang('Contributors')}</h3>
                </div>
                <div class="card-body home-info contributors">
                    <ul class="list-inline">
                        <li>{:lang('Loading...')}</li>
                    </ul>
                </div>
            </div>
        </case>
    </switch>
    <php>
        }
        }
    </php>

    <style>
        .card-header h3 {
            margin: 0;
            font-size: 1rem;
        }

        .wrap {
            margin: -10px;
        }

        .home-info .title {
            margin-right: 0.5rem;
        }

        .home-info li em {
            float: left;
            width: 120px;
            font-style: normal;
            font-weight: bold;
        }

        .home-info ul {
            padding: 0;
            margin: 0;
        }

        .home-info ul li {
            margin-bottom: 3px;
        }

        .panel {
            margin-bottom: 0;
        }

        .grid-sizer {
            width: 10%;
        }

        .grid-item {
            /*margin-bottom: 6px;*/
            padding: 10px;
        }

        .home-grid .dashboard-box .panel-title {
            cursor: move;
        }

        .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
            padding-left: 10px;
            padding-right: 10px;
            float: none;
        }

    </style>
    <hook name="admin_before_head_end"/>
</block>
<block name="main">
    <div class="wrap main-iframe-wrap">
        <empty name="has_smtp_setting">
            <div class="grid-item col-md-12">
                <div class="alert alert-danger alert-dismissible in" role="alert"
                     style="margin-bottom: 0;">
                    <a class="cmf-alert-close float-end" href="javascript:"><i class="fa fa-close"></i></a>
                    <strong><i class="fa fa-times-circle alert-icon"></i></strong> {:lang('NO_EMAIL_SETTINGS_WARNING_MSG')}
                    <a href="javascript:" class="badge text-bg-success" data-dismiss="alert" aria-label="Close"
                       onclick="parent.openapp('{:url('Mailer/index')}','admin_mailer_index','{:lang('ADMIN_MAILER_INDEX')}');">{:lang('Set now')}</a>
                </div>
            </div>
        </empty>

        <if condition="!function_exists('finfo_open')">
            <div class="grid-item col-md-12">
                <div class="alert alert-danger alert-dismissible in" role="alert" style="margin-bottom: 0;">
                    <a class="cmf-alert-close float-end" href="javascript:"><i class="fa fa-close"></i></a>
                    <strong><i class="fa fa-times-circle alert-icon"></i></strong> {:lang('NO_FILE_INFO_EXT_WARNING_MSG')}
                </div>
            </div>
        </if>

        <div class="grid-item col-md-12" id="thinkcmf-notices-grid" style="display:none;">
            <div class="dashboard-box">
                <div class="card">
                    <div class="card-header">
                        <h3 class="panel-title">
                            {:lang('SYSTEM_NOTIFICATIONS')}
                            <a class="cmf-alert-close float-end" href="javascript:"><i class="fa fa-close"></i></a>
                        </h3>
                    </div>
                    <div class="card-body home-info">
                        <ul id="thinkcmf-notices" class="list-unstyled">
                            <li>
                                <img src="__TMPL__/public/assets/images/loading.gif" style="vertical-align: middle;"/>
                                <span style="display: inline-block; vertical-align: middle;">{:lang('Loading...')}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="home-grid">
            <!-- width of .grid-sizer used for columnWidth -->
            <div class="grid-sizer"></div>
            <foreach name="dashboard_widgets" item="vo">
                <if condition="$vo.is_system">
                    <div class="grid-item col-md-6" data-system="1" data-widget="{$vo.name}" data-width="6">
                        <div class="dashboard-box">{:_get_system_widget($vo.name)}</div>
                    </div>
                    <else/>
                    <present name="dashboard_widget_plugins[$vo['name']]">
                        <div class="grid-item col-md-{$dashboard_widget_plugins[$vo['name']]['width']}" data-system="0"
                             data-widget="{$vo.name}" data-width="{$dashboard_widget_plugins[$vo['name']]['width']}">
                            <div class="dashboard-box">
                                {:str_replace(['panel-heading','panel-body','panel panel-default'],
                                ['card-header','card-body','card'],$dashboard_widget_plugins[$vo.name]['view'])}
                            </div>
                        </div>
                    </present>
                </if>

            </foreach>
        </div>
    </div>
</block>
<block name="scripts">
    <php>
        $lang_set=cmf_current_lang();
        $thinkcmf_version=cmf_version();
    </php>
    <script>
        $('.grid-item .cmf-alert-close').click(function () {
            $(this).parents('.grid-item').fadeOut(function () {
                $(this).remove();
            })
        });
        $('.dashboard-box').each(function () {
            var $this = $(this);
            if ($(this).children().length === 0) {
                $this.parents('.grid-item').remove();
            }
        });
        var $homeGrid = null;
        Wind.css('dragula');
        Wind.use('masonry', 'imagesloaded', 'dragula', function () {
            $homeGrid = $('.home-grid').masonry({
                // gutter: 10,
                // fitWidth:true,
                // set itemSelector so .grid-sizer is not used in layout
                itemSelector: '.grid-item',
                // use element for option
                columnWidth: '.grid-sizer',
                percentPosition: true,
                horizontalOrder: false,
                transitionDuration: 0
            });

            $homeGrid.masonry('on', 'layoutComplete', function (event, laidOutItems) {
            });

            $.ajax({
                url: "https://www.thinkcmf.com/service/team.php?lang={$lang_set}&v={$thinkcmf_version}",
                type: 'get',
                dataType: 'json',
                success: function (data) {
                    if (data.code == 1) {
                        var $wrap = $('<ul class="list-inline"></ul>')
                        $.each(data.data.main_contributors, function (i, item) {
                            if (item.url) {
                                $wrap.append('<li class="d-inline-block"><a href="' + item.url + '" target="_blank">' + item.name + '</a></li>&nbsp;')
                            } else {
                                $wrap.append('<li class="d-inline-block">' + item.name + '</li>&nbsp;')
                            }
                        });
                        $('.main_contributors').html($wrap);

                        $wrap = $('<ul class="list-inline"></ul>');
                        $.each(data.data.contributors, function (i, item) {
                            if (item.url) {
                                $wrap.append('<li class="d-inline-block"><a href="' + item.url + '" target="_blank">' + item.name + '</a></li>&nbsp;')
                            } else {
                                $wrap.append('<li class="d-inline-block">' + item.name + '</li>&nbsp;')
                            }
                        });
                        $('.contributors').html($wrap);
                        $homeGrid.masonry();
                    }
                },
                error: function () {

                },
                complete: function () {

                }
            });

            $homeGrid.masonry();

            var containers = [];
            $('.home-grid .grid-item').each(function () {
                containers.push(this);
            });
            dragula(containers, {
                isContainer: function (el) {
                    return false; // only elements in drake.containers will be taken into account
                },
                moves: function (el, source, handle, sibling) {
                    if ($(handle).is('.panel-title')) {
                        return true;
                    }
                    return false; // elements are always draggable by default
                },
                accepts: function (el, target, source, sibling) {
                    return true; // elements can be dropped in any of the `containers` by default
                },
                invalid: function (el, handle) {
                    return false; // don't prevent any drags from initiating by default
                },
                direction: 'vertical',             // Y axis is considered when determining where an element would be dropped
                copy: false,                       // elements are moved by default, not copied
                copySortSource: false,             // elements in copy-source containers can be reordered
                revertOnSpill: false,              // spilling will put the element back where it was dragged from, if this is true
                removeOnSpill: false,              // spilling will `.remove` the element, if this is true
                mirrorContainer: document.body,    // set the element that gets mirror elements appended
                ignoreInputTextSelection: true     // allows users to select input text, see details below
            }).on('drop', function (el, target, source, sibling) {
                var $target = $(target);
                var targetClasses = $target.attr('class');
                var targetDataWidget = $target.data('widget');
                var targetDataSystem = $target.data('system');
                var $source = $(source);
                var sourceClasses = $source.attr('class');
                var sourceDataWidget = $source.data('widget');
                var sourceDataSystem = $source.data('system');
                $(source).append($(target).find('.dashboard-box').not('.gu-transit'));
                $(target).append(el);
                $target.attr('class', sourceClasses);
                $target.data('widget', sourceDataWidget);
                $target.data('system', sourceDataSystem);

                $source.attr('class', targetClasses);
                $source.data('widget', targetDataWidget);
                $source.data('system', targetDataSystem);
                $homeGrid.masonry();

                _widgetSort();
            }).on('shadow', function (el, container, source) {
                $homeGrid.masonry();
            });


        });

        function _widgetSort() {

            var widgets = [];
            $('.home-grid .grid-item').each(function () {
                var $this = $(this);

                widgets.push({
                    name: $this.data('widget'),
                    is_system: $this.data('system')
                });
            });

            $.ajax({
                url: "{:url('Main/dashboardWidget')}",
                type: 'post',
                dataType: 'json',
                data: {widgets: widgets},
                success: function (data) {

                },
                error: function () {

                },
                complete: function () {

                }
            });
        }

        //获取官方通知
        $.getJSON("https://www.thinkcmf.com/service/sms_jsonp.php?lang={$lang_set}&v={$thinkcmf_version}&callback=?",
            function (data) {
                var tpl = '<li><em class="title"></em><span class="content"></span></li>';
                var $notices = $("#thinkcmf-notices");
                $notices.empty();
                if (data.length > 0) {
                    $('#thinkcmf-notices-grid').show();
                    $.each(data, function (i, n) {
                        var $tpl = $(tpl);
                        $(".title", $tpl).html(n.title);
                        $(".content", $tpl).html(n.content);
                        $notices.append($tpl);
                    });
                } else {
                    $notices.append("<li>^_^,{:lang('NO_NOTICE')}~~</li>");
                }

            });
    </script>
    <hook name="admin_before_body_end"/>
</block>